<template>
  <div>
    <div class="left">
      <ul>
        <li v-for="(item,index) in myArr" :key="index">{{ item }}</li>
      </ul>
      <button @click="onClick">走一走</button>
    </div>
    <div class="right">
      <ul class="theUl">
        <li v-for="(item,index) in numArr" :key="index">
          {{item}}
          <button @click="removeItem(index)">删除</button>
        </li>
      </ul>
      <button  @click="addNum">添加</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myArr: ["帅哥", "美女", "程序猿"],
      numArr: []
    };
  },
  methods: {
    onClick() {
      this.myArr.push(this.myArr[0]);
      this.myArr.splice(this.myArr[0], 1);
    },
    addNum(){
        let num = Math.ceil(Math.random()*10)
        this.numArr.push(num);
    },
    removeItem(i){
        this.numArr.splice(i,1)
    }
  },
  created() {},
  mounted() {}
};
</script>

<style scoped>
.left{
    float: left;
}
.right{
    float: left;
    margin-left: 75px;
}
.theUl{
    width: 120px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
</style>